<%- include('header.html') -%>
	<!-- technology-left -->
	<div class="technology">
        <div class="container">
            <div class="col-md-9 technology-left">
                <div class="tech-no">
                    <!-- technology-top -->
                    <% article.forEach(article =>{ %>
                    <div class="wthree">
                        <div class="col-md-12 wthree-right wow fadeInDown"  data-wow-duration=".8s" data-wow-delay=".2s">
                            <h3><a href="/article/<%=article.id%>"><%= article.title %></a></h3>
                            <h6>作者： <a href="singlepage.html"><%= article.author %> </a><%= article.time.toLocaleString() %></h6>
                            <div class="content"><%= article.content.replace(/<[^>]+>/g,'').substring(0,100) %>...</div>
                            <div class="bht1">
                                <a href="/article/<%=article.id%>">Read More</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <% }); %>
                </div>
                <!-- 分页 -->
                <!-- 分页 -->
                <div class="wthree" style="padding:0.5em">
                    <div class="col-md-12 wthree-right wow fadeInDown"  data-wow-duration=".8s" data-wow-delay=".2s">
                        <nav >
                            <ul class="pagination mt-3" style="width: 100%;margin: 0;text-align: center; line-height: 2em;font-size: 0.8em;color:#bbb;">
                                <% if(page.p != 1){ %>
                                <li class="page-item" style="float: left;">
                                    <a class="page-link" href="/?p=<%= page.p -1 %>" style="color:#aaa">上一页</a>
                                </li>
                                <% }%>
                                page <%= page.p %> of <%= page.total %>
                                <% if(page.p != page.total){ %>
                                <li class="page-item ml-auto" style="float: right;">
                                    <a class="page-link" href="/?p=<%= parseInt(page.p) + 1 %>" style="color:#aaa">下一页</a>
                                </li>
                                <% }%>
                            </ul>
                        </nav>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <!-- technology-right -->
            <%- include('right.html') -%>
            <!-- technology-right -->
        </div>
        
    </div>


<!-- <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="holder.js/100px400?text=图一&random=yes" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="holder.js/100px400?text=图二&random=yes" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="holder.js/100px400?text=图三&random=yes" class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div> -->
<!-- 热门推荐 -->
<!-- <div class="container mt-5">
    <h2 class="mb-4">热门推荐</h2>
    <div class="card-deck">
        <% hots.forEach(hot => { %>
        <div class="card">
            <img src="holder.js/100px200" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title"><%= hot.title %></h5>
                时间处理
                <p class="card-text"><small class="text-muted"><%= hot.time.toLocaleString() %></small></p>
                将html标签替换掉
                <p class="card-text"><%= hot.content.replace(/<[^>]+>/g,'').substring(0,100) %>...</p>
            </div>
            <div class="card-footer bg-white border-0">
                <a href="/article/<%=hot.id%>" class="btn btn-primary float-right stretched-link">查看详情</a>
            </div>
        </div>
        <% }); %>
    </div>
</div> -->
<!-- 最新推荐 -->
<!-- <div class="container mt-5">
    <h2 class="mb-4">最新博文</h2>
    <div class="row row-cols-4">
        <% article.forEach(article =>{ %>
        <div class="col my-3">
            <div class="card h-100">
                <img src="holder.js/100px150" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"><%= article.title %></h5>
                    <p class="card-text"><small class="text-muted"><%= article.time.toLocaleString() %></small></p>
                    <p class="card-text"><%= article.content.replace(/<[^>]+>/g,'').substring(0,50) %>...</p>
                    <a href="/article/<%=article.id%>" class="stretched-link"></a>
                </div>
            </div>
        </div>
        <% }); %>
    </div>
</div> -->

<!-- 引入尾部 -->
<%- include('footer.html') -%>